<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 15:55:55
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:07:09
-->
<template>
  <div class="apply">
    <div class="wrapper">
      <!-- 项目信息开始 -->
      <div class="title">{{ projectData.name }}</div>
      <div class="pay"><span>项目费用：</span>projectData.projectMoney 元</div>
      <div class="time">
        <span>起止时间：</span> {{ projectData.beginTime | fmtDate }}~{{
          projectData.endTime | fmtDate
        }}
      </div>
      <div class="content">
        <span>项目介绍：</span>{{ projectData.introduce }}
      </div>
      <!-- 项目信息结束 -->
      <!-- 步骤条显示开始 -->
      <div class="steps">
        <el-steps :active="1" align-center>
          <el-step
            title="申请报名"
            description="用户选择自己喜欢的项目进行报名"
          ></el-step>
          <el-step
            title="管理员确认"
            description="管理员确认用户报名，为用户开放账号"
          ></el-step>
          <el-step
            title="用户付款"
            description="用户登录后可以进行确认，完成付款"
          ></el-step>
          <el-step
            title="报名完成"
            description="报名接受后等待管理员线下通知"
          ></el-step>
        </el-steps>
      </div>
      <!-- 步骤条显示结束 -->
      <!-- 报名表单开始 -->
      <div class="applyForm">
        <el-form
          ref="form"
          :rules="rules"
          :model="form"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="tel">
            <el-input v-model="form.tel"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form.gender">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-col>
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.birth"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()"
              >确认报名</el-button
            >
            <el-button @click="resetForm('form')">重置</el-button>
          </el-form-item>
        </el-form>
      <!-- 报名表单结束 -->

        <!-- 已经报名.... -->
        <div class="applyQuery" @click="toApplyQuery()">
          已经报名？查看报名进度 >>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from "../utils/request";
export default {
  data() {
    return {
      // 表单信息
      form: {
        // name:'',
        // tel:0,
        // gender:'',
        // birth:0,
        // address:'',
        projectId:this.$route.query.id
      },
      id: this.$route.query.id,
      projectData: {},
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        tel: [{ required: true, message: "请选择活动区域", trigger: "change" }],
      },
    };
  },
  methods: {
    async getProjectDetail() {
      const data = {
        id: this.id,
      };
      await get("/index/project/findById", data).then((res) => {
        this.projectData = res.data;
        // console.log(this.projectData);
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 提交表单信息
    submitForm(){
      const data = {
        name:this.form.name,
        telephone:this.form.tel,
        gender:this.form.gender =='男'?'male':'female',
        birth:this.form.birth.getTime(),
        address:this.form.address,
        projectId:this.id
      }
      // console.log(data);
      // 调用请求方法
      this.applyData(data)
    },
    // 提交请求方法
    async applyData(data){
       let res = await post('/index/apply/saveOrUpdate',data)
       if(res.status === 200){
         this.$message({
           type:'success',
           message:res.message
         })
       }else{
         this.$message({
           type:'error',
           message:res.message
         })
       }
    },
    // 跳转至查询报名页
    toApplyQuery(){
      this.$router.push({
        path:'/applyQuery',
        query:{
          id:this.id
        }
      })
    }

  },
  created() {
    this.getProjectDetail();
    // this.submitForm()
  },
};
</script>

<style lang="scss" scoped>
.apply {
  .wrapper {
    width: 980px;
    .title {
      font-size: 20px;
      font-weight: 700;
      text-align: center;
      padding: 1em 0;
      color: #000;
    }
    .pay {
      padding: 0.5em 0;
      span {
        font-weight: 700;
      }
    }
    .time {
      padding: 0.5em 0;
      span {
        font-weight: 700;
      }
    }
    .content {
      padding: 0.5em 0;
      span {
        font-weight: 700;
      }
    }
    .steps {
      padding: 3em 0;
    }
    .applyForm {
      width: 500px;
      margin: 0 auto;
    }
    .applyQuery{
      width: 200px;
      color: #0189EC;
      margin: 0 auto;
      cursor: pointer;
      padding: 1em 0;
    }
    .applyQuery:hover{
      opacity: 0.8;
    }
  }
}
</style>